import React, { Component } from 'react'
import { renderRoutes } from 'react-router-config'
import { history } from '@/index'
import { connect } from 'react-redux'
import {
  mall_titleChangeToStore,
  changeGoodsStatus,
  detailData,
  changeBookLoading
} from '@/Redux/ActionTypes/MallManagement/MallManagementActionCreators'
import { selectedData } from '@/Redux/ActionTypes/public/BaseTable/publicActionCreator'
import { selectedOrderData } from '@/Redux/ActionTypes/public/BaseTable/publicActionCreator'
import { searchBookName, getBookDetail, getOrderDetail } from './ActionCreators'
import { Input, message } from 'antd';

const { Search } = Input;

const mapStateToProps = (state) => {
  return {
    title: state.mallManagement.mall_title,
  }
}
const mapDispatchToProps = (dispatch) => ({
  mall_title(...rest) {
    return dispatch(mall_titleChangeToStore(...rest))
  },
  setSelectedData(...rest) {
    return dispatch(selectedData(...rest))
  },
  changeGoodsStatus(...rest) {
    return dispatch(changeGoodsStatus(...rest))
  },
  setDetailData(...rest) {
    return dispatch(detailData(...rest))
  },
  changeBookLoading(...rest) {
    return dispatch(changeBookLoading(...rest))
  },
  setSelectedOrderData: (...rest) => dispatch(selectedOrderData(...rest)),
})

@connect(mapStateToProps, mapDispatchToProps)
class MallManagement extends Component {
  state = {
    searchLoading: false,
  }

  componentDidUpdate() {
    const changeMallTitle = this.props.mall_title
    switch (window.location.href.split('/').pop()) {
      case 'goods':
        return changeMallTitle('商品列表')
      case 'goodsInfo':
        return changeMallTitle('商品信息')
      case 'orderManagement':
        return changeMallTitle('订单管理')
      case 'orderMessage':
        return changeMallTitle('订单详情')
      default:
        return
    }
  }

  render() {
    const { route } = this.props
    const { title } = this.props

    return (
      <div>
        <div style={{ display: 'flex' }}>
          <h3 style={{ fontWeight: '700', flex: 'auto' }}>{title}</h3>
          {title !== '订单详情' ? <Search placeholder={title === "订单管理" ? "请输入单号" : "请输入书籍名称"} enterButton="立即搜索" style={{ maxWidth: '250px' }} loading={this.state.searchLoading} onSearch={(value, e) => this.handleSearch(value)} value={this.state.value} onChange={(value) => this.changeValue(value)} /> : ''}
        </div>
        {renderRoutes(route.routes)}
      </div>
    )
  }

  changeValue(value) {
    this.setState({
      value: value.target.value
    })
  }

  async handleSearch(value) {
    const { setSelectedOrderData } = this.props
    this.setState({ searchLoading: true })

    if (value === '') {
      message.error('搜索内容不能为空')
    } else {
      if (this.props.title === '订单管理' || this.props.title === '订单详情') {
        const res = await getOrderDetail(value)
        let data = res.data.data.list[0]
        if (data) {
          let order = {}
          Object.assign(order, {
            total: data.total,
            orderId: data.orderId,
            orderStatus: String(data.orderStatus),
            address: data.addressVo.address,
            receiveName: data.addressVo.receiveName,
            expressStatus: data.expressStatus,
            freight: data.freight,
            bookList: data.bookList,
            '下单时间': data.createTime,
            '单号': data.outTradeNo,
            '下单人': data.addressVo.receiveName,
            isOrderMessage: true
          })
          switch (order.orderStatus) {
            case '0':
              order.className = "status-color-red"
              break;
            case '1':
              order.className = "status-color-blue"
              break;
            case '2':
              order.className = "status-color-green"
              break;
            case '3':
              order.className = "status-color-green"
              break;
            case '4':
              order.className = "status-color-green"
              break;
            case '5':
              order.className = "status-color-blue"
              break;
            case '6':
              order.className = "status-color-red"
              break;
            case '7':
              order.className = "status-color-blue"
              break;
            default:
              break;
          }
          setSelectedOrderData(order)
          history.push('/homePage/mallManagement/orderManagement/orderMessage')
        }
        else {
          message.error('该订单不存在')
        }
      } else {
        this.props.changeBookLoading(true)
        const res = await searchBookName(value)
        if (res.data.data.length !== 0) {
          this.props.setSelectedData(res.data.data[0])
          this.props.changeGoodsStatus('update')
          const id = res.data.data[0].id
          const bookRes = await getBookDetail(id)
          const value = bookRes.data.data
          this.props.setDetailData(value)
          message.success('搜索成功')
          this.setState({
            value: ''
          })
          history.replace('/homePage/mallManagement/goods/goodsInfo')
        } else {
          message.error('没有找到相关书籍')
        }
        this.props.changeBookLoading(false)
      }
    }
    this.setState({ searchLoading: false })
  }
}

export default MallManagement